<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盖房子04</title>
		<style type="text/css">
			* { margin: 0; padding: 0; }
			#box{ position: relative; width: 600px; height: 500px; margin: 0 auto; border: 2px #999 solid; overflow: hidden; }
			/** 新增外层标签box, 使用原来wrap的样式，注意增加overflow：hidden **/
			#wrap { position: absolute; bottom: 0; width: 600px; }
			.row { position: absolute; overflow: hidden; }
			.row div { float: left; width: 20px; height: 20px; border:1px #000 solid; box-sizing: border-box; background: #ccc; }
			#fraction{ position: absolute; top: 5px; width: 100%; text-align: center; font-size: 50px; color: #333; }
			.row div {
				-webkit-transition: all 1s;
				-moz-transition: all 1s;
				-ms-transition: all 1s;
				-o-transition: all 1s;
				transition: all 1s;
				-webkit-transform: translate(0,0) rotate(0deg);
				opacity:1;
			}
			.row div.remove{				
				-webkit-transform: translate(0,100px) rotate(360deg);
				opacity:0;
			}
		</style>
	</head>
	<body>
		<p id="fraction">0</p>
		<div id="box">
			<div id="wrap"></div>
		</div>
	</body>
	<script type="text/javascript">

		function house() {
			var wrap = document.getElementById("wrap");
			var fraction = document.getElementById("fraction"); //计分器
			var rowNum = 20;
			var pieceWidth = 20;
			var time = 500;
			var bottom = 0;
			var lock = false;
			//lock锁，目的在于防止在一次操作没有执行完毕时，多次操作造成混乱，true：上锁，false：锁被打开
			
			function createRow() {
				//创建、设置row
				var box = document.getElementById("box"); //新加父级标签目的在于行数超过十行时从底部减去多余的
				var row = document.createElement("div");
				row.className = "row";
				row.style.bottom = bottom + "px";
				row.style.width = rowNum * pieceWidth + "px";
				row.direction = true;
				wrap.appendChild(row);

				var preRow = wrap.lastElementChild;
				if (preRow != null){
					row.style.left = preRow.offsetLeft + "px";
				}else{
					row.style.left = 0;
				}
				
				//创建row内部小方块
				for (var i=0; i<rowNum; i++){
					var piece = document.createElement("div");
					row.appendChild(piece);
				}
			
				function moveRow() {
					var rowStart = row.offsetLeft;
					row.style.left = rowStart + "px";
					var maxWidth = wrap.clientWidth - row.offsetWidth;
					
					row.timer = setInterval(function (){
						if (row.direction){
							rowStart += 20;
							if (rowStart >= maxWidth){
								row.direction = false;
							}
						}else{
							rowStart -= 20;
							if (rowStart <= 0){
								row.direction = true;
							}
						}
						row.style.left = rowStart + "px";
					},time);
				}
				moveRow();
				return row;
			}
			createRow();

			//移除小方块
			function removeRow() {
				var nowRow = wrap.lastElementChild;
				var nowPreRow = nowRow.previousElementSibling;

				if (nowPreRow){
					var difference = nowRow.offsetLeft - nowPreRow.offsetLeft;		
				}else{
					var difference = 0;
				}

				var removeNum = difference / pieceWidth;
				rowNum -= Math.abs(removeNum);

				//游戏结束
				if (rowNum <= 0){
					alert("游戏结束");
					clearInterval(nowRow.timer);
					return;
				}

				var pieceNum = nowRow.children;

				if (removeNum > 0){
					for (var i=0; i<removeNum; i++){
						var removeObj = nowRow.children[pieceNum.length - i - 1];
						removeObj.className="remove"; 
					}
					setTimeout(function (){
						for (var i = 0; i < removeNum; i++){
							nowRow.removeChild(nowRow.lastElementChild);
						}
					},1000);
				}else{
					removeNum = removeNum * -1;
					for (var i = 0; i < removeNum; i++){
						var removeObj = nowRow.children[i];
						removeObj.className = "remove";
					}
					setTimeout(function (){
						for (var i = 0; i < removeNum; i++){
							nowRow.removeChild(nowRow.firstElementChild);
						}
						nowRow.style.left = nowRow.offsetLeft + removeNum * 20 + "px";
					},1000);
				}
			}

			//操作点击事件的对象更换为新增的最外层标签box
			box.onclick = function() {
				if (lock){ //如果是上锁状态，返回不向下继续执行
					return;
				}
				lock = true; //每点击成功一次就上锁，在锁被打开之前，不能执行下一次点击事件
				//操作之间最小间隔为800ms
				setTimeout(function (){
					lock = false; //800ms后，打开锁
				},800);

				fraction.innerHTML++; //计分

				time -= 50;
				if (time <= 100) {
					time = 100;
				} 

				removeRow();

				bottom += 20; 
				//将高度始终保持在十行
				if (bottom > 200){
					wrap.style.bottom = -(bottom - 200) + "px";
				}
				
				var row = createRow();
				var preRow = row.previousElementSibling;
				if (preRow != null){
					clearInterval(preRow.timer);
				}
			}
		}
		house();

	</script>
</html>



